<template>
  <div class="weather-body">
    <div class="content-title">近期天气</div>
    <div class="content-detail">
      <div class="detail-body" v-if="weatherData && weatherData.length > 0">
        <div v-for="(item, index) in weatherData" :key="item.date">
          <div>{{ setDate(item, index) }}</div>
          <div>{{ item.date.slice(5, 10) }}</div>
          <div>{{ item.dayweather }}</div>
          <div>风力{{ item.daypower }}级</div>
        </div>
      </div>
      <div class="detail-body" v-else>
        <div>正在加载天气数据...</div>
      </div>
      <div class="detail-chart">
        <v-chart :option="chartOption"></v-chart>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";

const props = defineProps({
  weatherData: {
    type: Array,
    required: true,
  },
});

const setDate = (item, index) => {
  const week = ["日", "一", "二", "三", "四", "五", "六"];
  switch (index) {
    case 0:
      return "今天";
    case 1:
      return "明天";
    default:
      return `星期${week[new Date(item.date).getDay()]}`;
  }
};


const chartOption = computed(() => {
  if (!props.weatherData || !props.weatherData.length) {
    return getBaseOption();
  }
  
  const xData = props.weatherData.map(item => item.date ? item.date.slice(5, 10) : '');
  const dayData = props.weatherData.map(item => item.daytemp_float !== undefined ? Number(item.daytemp_float) : 0);
  const nightData = props.weatherData.map(item => item.nighttemp_float !== undefined ? Number(item.nighttemp_float) : 0);
  
  const option = getBaseOption();
  option.xAxis.data = xData;
  option.series[0].data = dayData;
  option.series[1].data = nightData;
  
  return option;
});


function getBaseOption() {
  return {
    grid: {
      left: 0,
      right: 0,
      bottom: '25%',
      top: '25%',
    },
    xAxis: {
      type: "category",
      show: false,
      data: [],
    },
    yAxis: {
      show: false,
    },
    series: [
      {
        data: [],
        type: "line",
        smooth: true,
        label: {
          show: true,
          position: "top",
          color: "#fff",
          formatter: function (params) {
            return "白" + params.value + "℃";
          },
        },
      },
      {
        data: [],
        type: "line",
        smooth: true,
        label: {
          show: true,
          position: "bottom",
          color: "#fff",
          formatter: function (params) {
            return "晚" + params.value + "℃";
          },
        },
      },
    ],
  };
}
</script>

<style lang="scss" scoped>
.weather-body {
  padding: 0 20%;
  padding-bottom: 50px;
  .content-title {
    color: white;
    margin-bottom: 15px;
  }
  .content-detail {
    background-color: rgb(0, 78, 113);
    color: white;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    .detail-body {
        text-align: center;
        display: flex;
        justify-content: space-around;
        margin-bottom: 25px;
        div{
            margin: 20px 0;
            font-size: 16px;
        }
    }
    .detail-chart{
        height: 200px;
    }
  }
}
</style>
